<template>
  <!-- 检查记录 -->
  <view class="goOverBag">
    <view class="btns-three">
      <view v-for="(item, index) in btnList" :key="index" class="btns-list"
        :class="item.index == activeIndex ? 'btnActive' : ''" @click="btnsClick(item)">
        <view>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <view class="wrapper-content">
      <!-- 合格 -->
      <template v-if="activeIndex == 0">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view class="md">
              <view class="line-hidden name">
                {{ v.companyMessageName }}
              </view>
              <view class="clause">
                检查类型：{{ v.industryExamineName }}
              </view>
              <view class="clause"> 检查民/辅警：{{ v.policeUserName }} </view>
            </view>
            <view class="down" :data-url="`/goOverBag/goPass/goPass?taskId=${v.id}`" @click="handleClickRouter">
              <view> {{ v.checkTime }}</view>
              <view>
                <u-icon name="arrow-right" color="#BBBBBB" size="20"></u-icon>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <!-- 不合格 -->
      <template v-if="activeIndex == 1">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view class="items">
              <view class="lt">
                <view class="line-hidden name">
                  {{ v.companyMessageName }}
                </view>
                <view class="clause">
                  检查类型：{{ v.industryExamineName }}
                </view>
                <view class="clause"> 检查民/辅警：{{ v.policeUserName }} </view>
                <view class="clause">
                  处罚结果：
                  {{ v.rectificationType == 1 ? "限期整改" : "停业整顿" }}
                  <block v-if="v.isFined == 1">
                    ,罚款{{ v.finedMoney }}元
                  </block>
                </view>
              </view>
              <view class="rt">
                <!-- // 0：待处理  1：已处理 -->
                <image :src="
                    v.isReceipt == 0
                      ? baseImgUrl + 'nobag-icon1.png'
                      : baseImgUrl + 'nobag-icon2.png'
                  " mode=""></image>
              </view>
            </view>
            <view class="down" :data-url="`/goOverBag/belowtheMark/nonGoover?taskId=${v.id}`"
              @click="handleClickRouter">
              <view> {{ v.checkTime }}</view>
              <view>
                <u-icon name="arrow-right" color="#BBBBBB" size="20"></u-icon>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <!-- 申诉记录 -->
      <template v-if="activeIndex == 2">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view class="md">
              <view class="line-hidden name">
                {{ v.companyMessageName }}
              </view>
              <view class="clause">
                检查类型：{{ v.industryExamineName }}
              </view>
              <view class="clause"> 检查民/辅警：{{ v.policeUserName }} </view>
              <view class="clause">
                处罚结果：
                {{ v.rectificationType == 1 ? "限期整改" : "停业整顿" }}
                <block v-if="v.isFined == 1"> ,罚款{{ v.finedMoney }}元 </block>
              </view>
            </view>
            <view class="down" :data-url="`/goOverBag/belowtheMark/complainDetail?id=${v.id}`"
              @click="handleClickRouter">
              <view> {{ v.checkTime }}</view>
              <view>
                <u-icon name="arrow-right" color="#BBBBBB" size="20"></u-icon>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <view v-if="!dataSource.length" style="margin-top: 5vh">
        <u-empty mode="list" text="暂无数据" :icon="baseImgUrl + 'no-icon2.png'">
        </u-empty>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    companyComplainPage,
    findTaskPage
  } from "@/api/goover.js";
  import {
    handleClickRouter,
    whetherLogin
  } from "@/utils/util.js";

  export default {
    props: {
      gooverCompanyId: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        activeIndex: 0,
        btnList: [{
            name: "合格",
            flag: true,
            index: 0,
          },
          {
            name: "不合格",
            flag: true,
            index: 1,
          },
          // {
          //   name: "申诉记录",
          //   flag: false,
          //   index: 2,
          // },
        ],
        dataSource: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },
    methods: {
      handleClickRouter,
      btnsClick(item) {
        let token = wx.getStorageSync("X-MINI-TOKEN");
        if (!token) {
          whetherLogin();
          return;
        }

        this.activeIndex = item.index;
        uni.setStorageSync("goOverBagIndex", item.index);

        this.pageBottom = false;
        this.dataSource = [];
        this.pageConfig.pageNo = 1;
        this.getList();
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.getList();
        } else {
          this.pageBottom = true;
        }
      },
      init() {
        this.activeIndex = uni.getStorageSync("goOverBagIndex") || 0; //记录检查中 二级类目的index
        this.dataSource = [];
        this.pageConfig.pageNo = 1;
        this.getList();
      },
      getList() {
        if (this.activeIndex == 2) {
          let data = {
            checkType: 1,
            pageNo: this.pageConfig.pageNo,
            pageSize: this.pageConfig.pageSize,
          };
          companyComplainPage(data).then((res) => {
            this.dataSource = this.dataSource.concat(res.result.records || []);
            this.pageConfig.total = res.result.total;
          });
        } else {
          let data = {
            companyId: this.gooverCompanyId,
            checkType: 1,
            checkResult: this.activeIndex + 1,
            pageNo: this.pageConfig.pageNo,
            pageSize: this.pageConfig.pageSize,
          };
          findTaskPage(data).then((res) => {
            this.dataSource = this.dataSource.concat(res.result.records || []);
            this.pageConfig.total = res.result.total;
          });
        }
      },
    },
  };
</script>

<style lang="scss">
  .goOverBag {
    height: 100%;

    .btns-three {
      display: flex;
      justify-content: space-around;
      position: relative;
      height: 71rpx;
      background: #f8f8f8;
      text-align: center;
      font-weight: 500;
      font-size: 30rpx;
      font-family: PingFang SC;

      .btns-list {
        padding: 0 45rpx;
        border-radius: 8rpx;
        color: #b4b4b4;
        width: 200rpx;
        height: 70rpx;
        font-size: 28rpx;
        line-height: 70rpx;
        border-radius: 32rpx;
        background: #fff;
      }

      .btnActive {
        color: #2488f5;
        background: #dcedff;
      }
    }

    .wrapper-content {
      background: #f8f9fb;
      height: calc(100vh - 140px);
      padding: 24rpx 16rpx;

      .wrapper-item {
        padding: 30rpx;
        padding-bottom: 0;
        background-color: #ffffff;
        margin-bottom: 20rpx;

        .md {
          border-bottom: 1rpx solid #e4e4e4;

          .name {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            margin-bottom: 17rpx;
          }

          .clause {
            margin-bottom: 20rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #a1a1a1;
          }
        }

        .items {
          display: flex;

          .lt {
            width: 480rpx;
            max-width: 480rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
            }

            .clause {
              margin-bottom: 17rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #a1a1a1;
            }
          }

          .rt {
            align-self: center;
            width: 140rpx;
            height: 122rpx;
            margin-left: 30rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .down {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          padding: 20rpx 0;
          font-size: 28rpx;
          font-weight: 400;
          color: #bbbbbb;
        }
      }
    }
  }
</style>